<template>
  <!-- 黑名单 -->
  <div class="app-container">
    <div class="app-wrap">
      <search-table ref="table" :table-loading="listLoading" :table-data="dataList" @query="queryForm(true)" @reset="refresh">
        <template v-slot:row>
          <el-form-item class="marginR20">
            <el-select class="width150" v-model="listQuery.list_type" filterable clearable placeholder="请选择">
              <el-option :label="item.label" :value="item.value" v-for="(item, index) in blackListData" :key="index"></el-option>
            </el-select>
            <el-input class="width200" type="text" v-model="listQuery.list_type_value" clearable placeholder="请输入数值"  />
          </el-form-item>
          <el-form-item label="处理方式:" label-width="80px">
            <el-select v-model="listQuery.ban_type" placeholder="请选择" filterable clearable>
              <el-option :label="item.label" :value="item.value" v-for="(item, index) in bannedData" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="统计时间:" label-width="80px">
            <el-select class="width150" v-model="listQuery.time_type" placeholder="请选择" filterable clearable>
              <el-option :label="item.label" :value="item.value" v-for="(item, index) in timeTypeData" :key="index"></el-option>
            </el-select>
            <el-date-picker is-range v-model="searchTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" 
              end-placeholder="结束日期" class="full-width-input time-box" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']" >
            </el-date-picker>
          </el-form-item>
        </template>
        <template v-slot:actions>
          <el-button type="info" size="mini" icon="el-icon-refresh" @click="refresh">刷新</el-button>
          <el-button type="primary" size="mini" icon="el-icon-setting" @click="addSetting">刷子监控设置</el-button>
        </template>
        <template>
          <el-table-column align="center" prop="id" label="ID" width="60"/>
          <el-table-column align="center" prop="created_at" label="统计时间" width="180"/>
          <el-table-column align="center" label="关联类型" width="180">
            <template slot-scope="scope">
              <span >{{ listTypeLabel(scope.row.list_type) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="ban_content" label="关联信息" width="180"/>
          <el-table-column align="center" prop="user_num" label="关联人数" width="100">
            <template slot-scope="scope">
              <span class="padding10 colorCorn" @click="openNumber(scope.row)">{{scope.row.user_num}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="ban_type" label="当前处理方式" width="180">
            <template slot-scope="scope">
              <span>{{ banTypeLabel(scope.row.ban_type)}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="admin_id" label="操作员"  width="200" />
          <el-table-column align="center" prop="updated_at" label="操作时间" width="200"/>
          <el-table-column align="center" prop="reason" label="备注" width="200" show-overflow-tooltip/>
          <el-table-column align="left" fixed="right" prop="operation" label="操作" width="120">
            <template slot-scope="scope">
              <el-tooltip effect="dark" v-permission="''" content="操作" placement="top-start">
                <el-button size="mini" type="primary" @click.stop="optItem(scope.row)"  >
                  操作
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </template>
        <template v-slot:footer>
          <pagination  :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getDataList" />
        </template>
      </search-table>
      <!-- 添加/操作 -->
      <el-dialog :visible.sync="blackDialog"  title="操作" width="50%" top="100px">
        <div class="border-box">
          <el-form ref="addRuleForm" :model="addQuery" :rules="addRuleForm" label-width="">
            <div class="flex item-box" v-for="(item,index) in itemData" :key="index">
              <div class="title width25">
                {{ item.label }}<span :class="item.pass?'mustPass':'noMustPass'">*</span>
              </div>
              <div class="content width80">
                <template v-if="dialogType == 1">
                  <el-form-item class="item-clear" v-show="item.key=='ip_str'" prop="ip_str" >
                    <el-input v-model="addQuery.ip_str" placeholder="多个用英文逗号隔开"></el-input>
                  </el-form-item>
                  <el-form-item class="item-clear" v-show="item.key=='device_str'" prop="device_str" >
                    <el-input v-model="addQuery.device_str" placeholder="多个用英文逗号隔开"></el-input>
                  </el-form-item>
                </template>
                <template v-if="dialogType == 2">
                  <el-form-item class="item-clear" v-show="item.key=='ban_type'" prop="ban_type" >
                    <el-select v-model="addQuery.ban_type" multiple class="width300" @change="selectChange">
                      <el-option :disabled="item.disabled" v-for="(item,j) in bannedData" :key="j+'111'" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item class="item-clear" v-show="item.key=='reason'" prop="reason" style="height: auto;padding-bottom: 5px;">
                    <el-input type="textarea" v-model="addQuery.reason"></el-input>
                  </el-form-item>
                </template>
              </div>
            </div>
            
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button size="medium" @click="blackDialog = false">取 消</el-button>
          <el-button size="medium" type="primary" @click="handleConfirm('addRuleForm')">确 定</el-button>
        </span>
      </el-dialog>
      
      <!-- 关联人数 -->
      <el-dialog :visible.sync="numberDialog"  title="监控详情" width="70%" top="100px">
        <h3>{{ details.ban_content }}</h3>
        <div style="height:500px">
          <search-table :table-data="numberData.list">
            <template>
              <el-table-column align="center" prop="user_id" label="ID" width="80"/>
              <el-table-column align="center" prop="agent_name" label="渠道名"  width="180" show-overflow-tooltip/>
              <el-table-column align="center" label="下注总金额" width="100">
                <template slot-scope="scope">
                  <span>{{ $public.mathNumberDivideWan(scope.row.bet_money)}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="充值总金额" width="100">
                <template slot-scope="scope">
                  <span>{{ $public.mathNumberDivideWan(scope.row.pay_money)}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="提现金额" >
                <template slot-scope="scope">
                  <span>{{ $public.mathNumberDivideWan(scope.row.cash_money)}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="reg_ip" label="注册IP" width="150"/>
              <el-table-column align="center" prop="reg_time" label="注册日期" width="150"/>
              <el-table-column align="center" prop="reg_device" label="注册设备" />
            </template>
            <template v-slot:footer>
              <pagination :total="numberData.total" :page.sync="detailQuery.page" :limit.sync="detailQuery.size" @pagination="getDetailsList" />
            </template>
          </search-table>
        </div>
      </el-dialog>


    </div>
  </div>
</template>

<script>
import { throttle } from '@/utils/index'
import {
  getUserMonitorList,
  postMonitorAdd,
  putMonitorUpdate,
  getUserMonitorDetails
} from '@/api/risk'
import PageDetails from './page-details.vue'
import SearchTable from '@/components/SearchTable'

export default {
  name: 'blacklist',
  components: {
    PageDetails,
    SearchTable
  },
  data () {
    return {
      channelData: this.$store.state.commonState.channelShowDataArray,
      listLoading: false,
      listQuery: {
        page: 1,
        size: 10,
        list_type:'',
        list_type_value:'',
        ban_type:'',
        time_type:1,
        start_time:'',
        end_time:''
      },
      searchTime:null,//时间查询
      dataList:[],
      currentTotal: 0,
      timeTypeData:[
        {label:'统计时间',value:1},
        {label:'操作时间',value:2},
      ],
      blackListData:[
        {label:'IP',value:3},
        {label:'玩家ID',value:1},
        {label:'手机号',value:2},
        {label:'设备号',value:4},
      ],
      bannedData:[
        {label:'正常用户',value:1,type:'success',disabled:false},
        {label:'禁止登录',value:2,type:'info',disabled:false},
        {label:'禁止提现',value:4,type:'danger',disabled:false},
        {label:'禁止彩金',value:8,type:'warning',disabled:false},
      ],
      blackDialog:false, //弹框
      dialogType:1,// 弹框类型  1 刷子监控设置  2 操作
      addQuery:{ // 新增字段
        ban_type:[2], // 处罚方式
        reason:'',// 备注
      },
      itemData:[
        { label: '处罚方式', key: 'ban_type',pass:true},
        { label: '备注', key: 'reason' ,pass:true},
      ],
      addRuleForm:{ // 新增验证
        ban_type:{ required: true, message: '请输入', trigger: 'blur' },
        reason:{ required: true, message: '请输入', trigger: 'blur' },
      },
      // 关联人数弹框   start
      numberDialog:false,// 控制显示
      details:{},
      numberData:{
        total:0,
        list:[]
      },
      detailQuery:{ // 关联人数查询参数
        id:'',
        page:1,
        size:10
      }
      // 关联人数弹框   end 
    }
  },
  created () {
    this.getDataList()
  },
  activated(){
    this.channelData=this.$store.state.commonState.channelShowDataArray
    // this.getDataList()
  },
  methods: {
    // 获取列表
    async getDataList (query) {
      let that = this,params=that.listQuery;
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      if (this.searchTime && this.searchTime.length) {
        params.start_time = this.searchTime[0]
        params.end_time = this.searchTime[1]
      }
      that.dataList = [];
      that.listLoading = true;
      const response = await getUserMonitorList(params)
      if (response.code==1) {
        if (response.data.list) {
          response.data.list.forEach(item => {
            item.isChecked = false
          })
          that.currentTotal = response.data.total
          that.dataList = response.data.list
        }
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false
    },
    // 查询
    queryForm(){
      this.getDataList(true)
    },
    // 封禁类型列表回显/ 处罚方式
    banTypeLabel(val) {
      let arr = []
      this.bannedData.forEach(item => {
        if ((val & item.value) == item.value) {
          arr.push(item.label)
        }
      })
      return arr.toString()
    },
    // 关联类型回显
    listTypeLabel(type) {
      let item = this.blackListData.find(item => item.value == type)
      return item.label
    },
    handleConfirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let query = JSON.parse(JSON.stringify(this.addQuery))
          if (this.dialogType == 1) {
            // 添加
            postMonitorAdd(query)
              .then((res) => {
                if (res.code == 1) {
                  this.$message({
                    type:'success',
                    message:'操作成功！'
                  })
                  this.blackDialog = false;
                  this.getDataList()
                }
              })

          } else {
            // 操作
            let type = query.ban_type.reduce((prev,curr) => {return prev + curr })
            query.ban_type = type
            putMonitorUpdate(query)
              .then((res) => {
                if (res.code == 1) {
                  this.$message({
                    type:'success',
                    message:'操作成功！'
                  })
                  this.blackDialog = false;
                  this.getDataList()
                }
              })
          }
        }
      });
    },
    // 刷子监控设置
    addSetting() {
      this.dialogType = 1
      this.addQuery = { // 新增字段
        ip_str:'', // ip地址 多个用英文逗号隔开
        device_str:'' // 设备号 多个用英文逗号隔开
      }
      this.itemData = [
        { label: 'IP地址', key: 'ip_str'},
        { label: '设备号', key: 'device_str'},
      ]
      this.blackDialog = true;
    },
    // 操作 
    optItem(row) {
      this.dialogType = 2 
      this.itemData = [
        { label: '处罚方式', key: 'ban_type',pass:true},
        { label: '备注', key: 'reason' ,pass:true},
      ]
      let arr = []
      this.bannedData.forEach(item => {
        if ((row.ban_type & item.value) == item.value) {
          arr.push(item.value)
        }
      })
      if (row.list_type == 3 || row.list_type == 4) {
        this.bannedData.forEach((item) => {
          if (item.value == 2 || item.value == 1) {
            item.disabled = false
          } else {
            item.disabled = true
          }
        })
      } else {
        this.bannedData.forEach((item) => {
          item.disabled = false
        })
      }
      this.addQuery = { // 新增字段
        ...row,
        ban_type:arr, // 处罚方式
      },
      this.blackDialog = true
    },
    // 选择的时候不能正常用户和禁止用户一起选
    selectChange(val) {
      if (val.length >= 2) {
        if (val.indexOf(1) >= 0 ) {
          let arr = val.filter((item, index) => item !== 1);
          this.addQuery.ban_type = arr
        }
      }
    },
    // 关联人数
    async openNumber(row) {
      if (row.user_num <= 0) {
        return 
      }
      this.details = row
      this.detailQuery.id = row.id
      await this.getDetailsList()
      this.numberDialog = true
    },
    // 查询关联人数列表
    getDetailsList() {
      getUserMonitorDetails(this.detailQuery)
        .then((res) => {
          if(res.code == 1) {
            this.numberData = res.data
          }
        })
    },
    // 刷新
    refresh: throttle(function () {
      this.listQuery = {
        page: 1,
        size: 50,
        list_type:'',
        list_type_value:'',
        ban_type:'',
        time_type:1,
        start_time:'',
        end_time:''
      }
      this.getDataList();
    }, 2000),
  }
}
</script>

<style lang="scss" scoped>
</style>
